import React, { Component } from 'react'
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
import { Input, Button } from 'antd'
export default class Editor extends Component {
  state = {
    proname: '',
    editorState: '',
    outputHTML: '<div></div>'
  }
  handleChange = (editorState) => {
    this.setState({
      editorState,
      outputHTML: editorState.toHTML()
    })
  }
  render() {
    const { editorState } = this.state
    return (
      <div>
        <h1>富文本编辑器</h1>
        <Input placeholder = "产品名称" value={ this.state.proname } onChange = {(e) => {
          this.setState({
            proname: e.target.value
          })
        }}></Input>
        <BraftEditor
          value={editorState}
          onChange={this.handleChange}
        />

        <Button onClick = {
          () => {
            const data = {
              proname: this.state.proname,
              outputHTML: this.state.outputHTML
            }
            // data存入数据库
            console.log(data)
          }
        }>获取数据</Button>
        <h2>预览数据</h2>
        <div dangerouslySetInnerHTML={{ __html: this.state.outputHTML }}></div>
      </div>
    )
  }
}
